<div class="kie-dataTypesList-modal modal-wide" tabindex="-1" role="dialog" id="collectionEditor">
    <div class="modal-backdrop in"></div>
    <div class="modal-dialog" style="width:100%" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-field="closeCollectionEditorButton">
                    <span class="pficon pficon-close"></span>
                </button>
                <h4 class="modal-title" data-field="editorTitle"><span class="fa fa-list"></span></h4>
            </div>
            <div class="modal-body" style="overflow-y: auto" data-field="collectionEditorModalBody">
                <div class="container-fluid">
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <label data-field="collectionCreationModeLabel"></label>
                            <div class="radio">
                                <label>
                                    <input type="radio" data-field="createCollectionRadio" name="collectionRadio" id="kie-radio-option-1" value="option1" style="margin-top: 0px;" checked="">
                                    <span data-field="collectionCreationCreateLabel" style="font-weight: bold;"></span>
                                    <span data-field="collectionCreationCreateSpan"></span>
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" data-field="defineCollectionRadio" name="collectionRadio" id="kie-radio-option-2" value="option2" style="margin-top: 0px;">
                                    <span data-field="collectionCreationDefineLabel" style="font-weight: bold;"></span>
                                    <span data-field="collectionCreationDefineSpan"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Data objects -->
                        <div class="col-xs-12 tab-content">
                            <label data-field="createLabel"></label>
                            <!-- Data objects -->
                            <div class="tab-content">
                            <!-- first right side panel -->
                                <div class="tab-pane active" data-field="createCollectionContainer" id="kie-ObjectListItem1" aria-labelledby="#kie-ObjectListTab1">
                                    <ul class="list-group list-group kie-object-lis" data-field="elementsContainer">
                                        <li class="list-group-item" style="list-style-type: none;">
                                            <span class="fa fa-angle-down kie-object-list__expander" data-field="faAngleRight"></span>
                                            <span class="kie-object-list__field-value" data-field="propertyTitle"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div data-field="defineCollectionContainer">
                                    <textarea class="collection-editor-expression_textarea" data-field="expressionElement"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-body collection-editor-add-button-container">
                <button class="btn btn-link" data-field="addItemButton">
                    <span class="fa fa-plus"></span>
                    <span data-field="addItemButtonLabel"></span>
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" data-field="saveButton">
                    <span class="fa fa-save" style="margin-right: 5px;"></span>
                    <span data-field="saveButtonSpanText"></span>
                </button>
                <button type="button" class="btn btn-danger" data-dismiss="modal" data-field="removeButton">
                    <span class="fa fa-remove" style="margin-right: 5px;"></span>
                    <span data-field="removeButtonSpanText"></span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal" data-field="cancelButton"></button>
            </div>
        </div>
    </div>
</div>
